import React, { useEffect } from "react";
import * as echarts from "echarts";

type EChartsOption = echarts.EChartsOption;

const OneEcharts = () => {
  useEffect(() => {
    const chartDom = document.getElementById("onemain")!;
    const myChart = echarts.init(chartDom);
    let option: EChartsOption;

    // eslint-disable-next-line prefer-const
    option = {
      title: {
        text: "数据分析",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["新增总表单（份）", "新增被浏览（次）"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "新增总表单（份）",
          type: "line",
          stack: "Total",
          data: [0, 0, 0, 0, 0, 0, 0],
        },
        
        {
          name: "新增被浏览（次）",
          type: "line",
          stack: "Total",
          data: [0, 0, 0, 0, 0, 0, 0],
        },
        
      ],
    };

    option && myChart.setOption(option);
  }, []);

  return <div id="onemain" style={{ width: "100%", height: "100%" }}></div>;
};

export default OneEcharts;